/**
 * 发送get异步请求
 * @param {string} url 请求地址
 * @param {object} params  请求参数 
 * @param {function} callback  回调函数，用来其它地方调用写不同逻辑的，有一个形参res是接口数据
 * @param {function|null} type  后端返回的数据类型，默认后端返回什么就是什么，传json就json，传xml就xml
 * @param {object} headers 自定义请求头  
 */
 function get(url,params,callback,type = null,headers = {}){
    // 一，创建xhr对象
    const xhr = new XMLHttpRequest
    // 二、监控请求状态
    xhr.onreadystatechange = () => {
        // 判断是否返回数据
        if(xhr.readyState === 4){
            // 判断是否返回的状态
            if(xhr.status === 200){
                // 获取数据
                let res = xhr.responseText
                if(type === 'json')  res = JSON.parse(res)
                // 调用callback（不同逻辑处理，里面N行代码。在其他地方调用这函数里面的代码，代码会在这函数里执行）
                callback(res)
            }else{
                console.log(xhr.status)
            }
        }
    }
    // 三、设置请求方式和地址
    // 需求：将传递的形参 params {a:1,b:1} 转换 xhr传递参数要的get格式  a=1&b=2
    let temp = []
    // 遍历对象
    for (let key in params){
        temp.push(`${key}=${params[key]}`)
    }
    // xhr.open('get', `${url}?${params}`)
    xhr.open('get', `${url}?${temp.join('&')}`)
    // 自定义请求头  headers = {'content-type';'app'}
    for(let key in headers){
        // 当对象的键是变量时，用数组语法，所以headers[key]，用中括号
        xhr.setRequestHeader(key,headers[key])
        // xhr.setRequestHeaders('content-type','application/x-www-urlencoded')
        // xhr.setRequestHeaders('token','sdfadf')
    }
    // 四、发送请求
    xhr.send(null)
    
    }
    
    /**
     * 发送post异步请求
     * @param {string} url 请求地址
     * @param {object} params 请求参数
     * @param {function} callback 回调函数
     * @param {string} type 后端返回的数据类型
     * @param {object} headers 请求头
     */
    function post(url,params,callback,type = null,headers = {}) {
        // 一、创建xhr对象
        const xhr = new XMLHttpRequest
    // 二、监控请求状态
    xhr.onreadystatechange = () => {
        // 判断是否返回数据
        if(xhr.readyState === 4){
            // 判断是否返回的状态
            if(xhr.status === 200){
                // 获取数据
                let res = JSON.parse(xhr.responseText)
                // 调用callback（不同逻辑处理，里面N行代码。在其他地方调用这函数里面的代码，代码会在这函数里执行）
                callback(res)
            }else{
                console.log(xhr.status)
            }
        }
    }
    // 三、设置请求方式和地址
    xhr.open('post', url)
    xhr.setRequestHeader('content-type','application/x-wwww-form-urlencoded')
    for (let key in headers){
        xhr.setRequestHeader(key,headers[key])
    }
    // 四、发送请求
    // params {a:1,b:2}
    // 1 定义空数组temp 存放参数
    let temp = []
    // 2 遍历对象
    for (let key in params){
        // 3 将对象中的数据 push到空数组temp中去  键=值
        temp.push(`${key}=${params[key]}`)
    }
    // 4 数组变字符串 ['a=1', 'b=2'] =>  a=1$b=2
    // xhr.send(params)
    xhr.send(temp.join('$'))
    }


    export {get,post}